<template>
  <div id="postDetail">
    <div class="send-pad">
      <h2>{{ topic.title }}</h2>
      <el-button style="margin-left: auto" type="primary" @click="toBottom"
        >回帖</el-button
      >
    </div>

    <div class="reply-content">
      <div class="content-item">
        <div class="left">
          <div class="user-no"></div>
          <div class="user-info">
            <img
              :src="'http://localhost:8080/forum/upload/' + topic.avatar"
              alt=""
            />
            <p>{{ topic.nickname }}</p>
          </div>
        </div>
        <div class="right">
          <div class="send-time">
            <font
              style="
                font-size: 20px;
                line-height: 30px;
                color: #6699cc;
                font-weight: bolder;
                margin-left: 15px;
              "
              >楼主</font
            >
            发表于 {{ topic.publishTime }}
          </div>

          <div class="content-detail">
            <p>
              {{ topic.content }}
            </p>
          </div>
          <div class="content-foot">
            <span @click="changeLike" id="likesNum">
              <img
                v-if="!likeIcon"
                class="icon"
                src="../assets/images/not_like.png"
              />
              <img
                v-if="likeIcon"
                class="icon"
                src="../assets/images/like.png"
              />
              <p>
                {{ topic.likes }}
              </p>
            </span>
            <span @click="changeCollection()" id="collectionNum">
              <img
                v-if="!collectIcon"
                class="icon"
                src="../assets/images/not_collect.png"
              />
              <img
                v-if="collectIcon"
                class="icon"
                src="../assets/images/collect.png"
              />
              <p>{{ topic.collectionTimes }}</p>
            </span>
            <span
              ><img
                @click="toBottom"
                class="icon"
                src="../assets/images/comment.png"
            /></span>
          </div>
        </div>
      </div>

      <ul>
        <li v-for="(comment, index) in pageData" :key="index">
          <div class="content-item">
            <div class="left">
              <div class="user-no"></div>
              <div class="user-info">
                <img
                  :src="'http://localhost:8080/forum/upload/' + comment.avatar"
                  alt=""
                />
                <p>{{ comment.nickname }}</p>
              </div>
            </div>
            <div class="right">
              <div class="send-time">发表于 {{ comment.comPublishTime }}</div>
              <div class="content-detail">{{ comment.comContent }}</div>
              <div class="content-foot">
                <span @click="changeCommentLike(index)" class="commentLikesNum">
                  <img class="icon" src="../assets/images/not_like.png" />
                  <p>
                    {{ comment.comLikes }}
                  </p>
                </span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="reply-page">
      <el-pagination
        @current-change="handleCurrentChange"
        background
        layout="total, prev, pager, next"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="commentList.length"
      >
      </el-pagination>
    </div>
    <div class="write-pad">
      <div class="ue">
        <vue-ueditor-wrap
          v-model="content"
          :config="myConfig"
        ></vue-ueditor-wrap>
      </div>
      <el-button type="primary" @click="submitComment">发送</el-button>
    </div>
  </div>
</template>

<script>
import VueUeditorWrap from "vue-ueditor-wrap";
import { mixin } from "../mixins";
export default {
  mixins: [mixin],
  components: {
    VueUeditorWrap,
  },
  computed: {
    // 计算当前表格中的数据
    pageData() {
      return this.commentList.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
  },
  data() {
    return {
      user: JSON.parse(sessionStorage.getItem("user")),
      pageSize: 5, // 页数
      currentPage: 1, // 当前页
      likeIcon: false,
      collectIcon: false,
      likeDate: Date.now(),
      likeDateIdx: Date.now(),
      collectDate: Date.now(),
      collectDateIdx: Date.now(),
      content: "",
      myConfig: {
        // 设置编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 320,
        // 初始容器宽度
        initialFrameWidth: "972",
        // 可以放后台存放路径
        serverUrl: "",
        // UEditor 是文件的存放路径，
        UEDITOR_HOME_URL: "/static/UEditor/",
      },
      topic: "",
      commentList: [],
    };
  },
  beforeRouteLeave(to, from, next) {
    // 监听到页面离开时调用
    // to: 即将要进入的目标的路由对象
    // from: 当前导航正要离开的路由
    // next: 是一个function，一定要调用该方法，否则路由不会跳转。
    if (from.path === "/Home/UserTopic") {
      this.submitLikeChange();
      this.submitCollectionChange();
    }
    // 一定要调用next
    next();
  },
  methods: {
    submitLikeChange() {
      console.log(this.likeDate);
      console.log(this.likeDateIdx);
      if (this.likeDate === this.likeDateIdx) {
        return;
      }
      let uId = JSON.parse(sessionStorage.getItem("user")).uId;
      let tId = this.$route.query.data;
      let isLike = this.likeIcon;
      var _this = this;
      $.ajax({
        type: "post",
        url: "http://localhost:8080/forum/savelike",
        data: { uId, tId, isLike },
        dataType: "json",
        success: function (response) {},
      });
    },
    submitCollectionChange() {
      console.log(this.collectDate);
      console.log(this.collectDateIdx);
      if (this.collectDate === this.collectDateIdx) {
        return;
      }
      let uId = JSON.parse(sessionStorage.getItem("user")).uId;
      let tId = this.$route.query.data;
      let isCollection = this.collectIcon;
      var _this = this;
      $.ajax({
        type: "post",
        url: "http://localhost:8080/forum/savecollection",
        data: { uId, tId, isCollection },
        dataType: "json",
        success: function (response) {},
      });
    },
    getIsLike() {
      let uId = JSON.parse(sessionStorage.getItem("user")).uId;
      let tId = this.$route.query.data;
      var _this = this;
      $.ajax({
        type: "get",
        url: "http://localhost:8080/forum/islike",
        data: { uId, tId },
        dataType: "json",
        success: function (response) {
          if (response === true) {
            _this.likeIcon = true;
            $("#likesNum p").css("color", "#ff8282");
          }
        },
      });
    },
    getIsCollection() {
      let uId = JSON.parse(sessionStorage.getItem("user")).uId;
      let tId = this.$route.query.data;
      var _this = this;
      $.ajax({
        type: "get",
        url: "http://localhost:8080/forum/iscollection",
        data: { uId, tId },
        dataType: "json",
        success: function (response) {
          if (response === true) {
            _this.collectIcon = true;
            $("#collectionNum p").css("color", "#ff8282");
          }
        },
      });
    },
    // 获取当前页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    submitComment() {
      var _this = this;
      let tId = this.topic.tId;
      let uId = this.user.uId;
      let content = this.content;
      $.ajax({
        type: "get",
        data: { tId, uId, content },
        url: "http://localhost:8080/forum/insertcomment",
        dataType: "json",
        success: function (response) {
          if (response === 200) {
            _this.$message({
              message: "发布成功",
              type: "success",
              duration: 1000,
            });
            _this.commentList.push({
              comUId: uId,
              comContent: content,
              comPublishTime: _this.getNowDate(),
              comLikes: 0,
              nickname: _this.user.nickname,
              avatar: _this.user.avatar,
            });
            console.log(_this.commentList);
          }
        },
      });
    },
    changeLike() {
      let num = parseInt($("#likesNum p").text());
      if (this.likeIcon === false) {
        $("#likesNum p").text(num + 1);
        $("#likesNum p").css("color", "#ff8282");
      } else {
        $("#likesNum p").text(num - 1);
        $("#likesNum p").css("color", "#000");
      }
      this.likeDate = Date.now();
      this.likeIcon = !this.likeIcon;
    },
    changeCollection() {
      let num = parseInt($("#collectionNum p").text());
      if (this.collectIcon === false) {
        $("#collectionNum p").text(num + 1);
        $("#collectionNum p").css("color", "#ff8282");
      } else {
        $("#collectionNum p").text(num - 1);
        $("#collectionNum p").css("color", "#000");
      }
      this.collectDate = Date.now();
      this.collectIcon = !this.collectIcon;
    },
    changeCommentLike(index) {
      index = 0;
      let img = $(".commentLikesNum:eq(" + index + ") p").prop("color");
      console.log(img);
    },
    toBottom() {
      window.scrollTo(
        0,
        document.documentElement.offsetHeight - window.innerHeight
      );
    },
    getCommentList() {
      const _this = this;
      let tId = this.$route.query.data;
      $.ajax({
        type: "get",
        data: { tId },
        url: "http://localhost:8080/forum/commentlist",
        dataType: "json",
        success: function (response) {
          console.log("commentlist", response);
          _this.commentList = response;
        },
      });
    },
    getTopic() {
      var _this = this;
      let tId = this.$route.query.data;
      $.ajax({
        type: "get",
        url: "http://localhost:8080/forum/user/topic",
        data: { tId },
        dataType: "json",
        success: function (response) {
          // console.log("nicelist", response);
          _this.topic = response;
        },
      });
    },
    beforeunloadHandler(e) {
      console.log("beforeunloadHandler-------------");
      this.submitLikeChange();
      this.submitCollectionChange();
    },
    // updateHandler() {
    //   console.log("updateHandler-------------");
    //   this.submitLikeChange();
    //   this.submitCollectionChange();
    // },
  },

  mounted() {
    this.getTopic();
    this.getCommentList();
    this.getIsCollection();
    this.getIsLike();
    window.addEventListener("beforeunload", (e) => this.beforeunloadHandler(e));
    // window.addEventListener("unload", this.updateHandler);
  },
  destroyed() {
    window.removeEventListener("beforeunload", (e) =>
      this.beforeunloadHandler(e)
    );
    // window.removeEventListener("unload", (e) => this.unloadHandler(e));
  },
};
</script>


<style lang="less" scoped>
.editor-container {
  border: 1px solid #dadada;
  border-radius: 5px;
  overflow: hidden;
  .toolbar {
    height: 35px;
    border-bottom: 1px solid #ccc;
    /deep/ .w-e-menu {
      padding: 0 10px;
    }
  }
  .editor {
    height: 250px;
    /deep/ .w-e-text {
      overflow-y: auto;
    }
  }
}
.icon {
  width: 24px;
  cursor: pointer;
  vertical-align: middle;
}
body,
html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#postDetail {
  padding: 0 16px;
}

.send-pad {
  display: flex;
  margin: 15px 0;
  align-items: center;
}

.el-button {
  width: 80px !important;
  height: 45px !important;
}

.reply-page {
  text-align: right;
  margin: 16px 0;
}

.reply-content .post-title {
  background-color: #e5edf2;
  height: 42px;
  line-height: 36px;
  font-size: 14px;
  border-bottom: 6px solid #c2d5e3;
}

.reply-content .post-title .left {
  width: 200px;
  float: left;
}

ul {
  padding-left: 0;
  list-style: none;
}

.content-item {
  border-bottom: 6px solid #c2d5e3;
}

.content-item .left {
  width: 200px;
  background-color: #e5edf2;
  padding-bottom: 6px;
  float: left;
}

.content-item .left .user-no {
  height: 36px;
  line-height: 36px;
  border-bottom: 1px #ccc dashed;
  background-color: #fff;
  padding-left: 16px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.content-item .left .user-info {
  text-align: center;
  padding-top: 16px;
}

.content-item .left .user-info img {
  border: 6px #fff solid;
  width: 132px;
  height: 132px;
}

.content-item .left .user-info p {
  text-align-last: left;
  padding-left: 34px;
  font-size: 14px;
}

.content-item .right {
  min-height: 282px;
  min-height: 252px;
  background-color: #fff;
  font-size: 14px;
  overflow: hidden;
  padding: 0 6px;
}

.content-item .right .send-time {
  height: 36px;
  line-height: 36px;
  border-bottom: 1px dashed #ccc;
  text-align: right;
  padding: 5px 10px;
}

.content-item .right .content-detail {
  text-align: left;
  min-height: 180px;
  padding: 10px;
}

.content-item .right .content-detail p {
  margin: 0;
  line-height: 20px;
  letter-spacing: 1px;
}

.content-item .right .content-foot {
  height: 36px;
  line-height: 36px;
  border-top: 1px dashed #ccc;
  text-align: right;
}

.content-item .right .content-foot span {
  margin-right: 16px;
}

.content-item .right .content-foot span p {
  margin: 0;
  display: inline;
  cursor: pointer;
  vertical-align: middle;
}

.write-pad {
  width: 100%;
  margin: auto;
  text-align: left;
}
.write-pad #content {
  height: 180px;
}
.write-pad p {
  margin-top: 106px;
  margin-bottom: 36px;
}
.write-pad .el-button {
  margin-top: 15px;
}
</style>